<template>
    <!-- <div ref="iframeCnt" class="com-cnt"></div> -->
    <div class="com-cnt">
        <div style="height:140px;display:flex;justify-content:center;align-items:center;">
            <div style="width:70px;height:70px;background-size:100% 100%" :style="{backgroundImage:registerhead}"></div>

        </div>
        <ul class="userlist">
            <li>
                <span>
                    <img src="@/assets/imgs/register/sjhm.png" alt="">
                </span>
                <input id="phoneNo" placeholder="输入手机号码" maxlength="11" v-model="registers.mobile" @blur="phoneBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" @keyup="myKeyup($event)" />
            </li>
            <li>
                <span>
                    <img src="@/assets/imgs/register/dxyzm.png" alt="">
                </span>
                <input placeholder="短信验证码" maxlength="6" v-model="registers.validateCode" @blur="codeBlur" @keyup="myKeyup($event)" />
                <button @click="getSMSCode()" class="code-btn" :disabled="!show">
                    <p v-show="show">获取验证码</p>
                    <p v-show="!show" class="count">{{count}} s</p>
                </button>
            </li>
            <li>
                <span>
                    <img src="@/assets/imgs/register/dlmm.png" alt="">
                </span>
                <input type="password" placeholder="设置登录密码" v-model="registers.password" @blur="passwordBlur" />
            </li>
            <li>
                <span>
                    <img src="@/assets/imgs/register/dlmm.png" alt="">
                </span>
                <input type="password" placeholder="确认密码" v-model="passwords" @blur="passworsdBlur" />
            </li>
            <li>
                <span>
                    <img src="@/assets/imgs/register/tjm.png" alt="">
                </span>
                <input id="recommendCode" placeholder="推荐码 (选填)" v-model="registers.recommenderNo" @blur="codeBlur" />
            </li>
            <!-- <li> 
                <span>
                    <img src="@/assets/imgs/register/mech.png" alt="">
                </span>
                <input @blur="codeBlur" placeholder="推荐人机构代码 (选填)" v-model="registers.refPersonCount" />
            </li> -->
            <li>
                <span>
                    <img src="@/assets/imgs/register/name.png" alt="">
                </span>
                <input placeholder="请输入姓名(选填)" v-model="registers.nickName" />
            </li>
            <!-- <div class="confirmbig"><div class="confirmlittle"></div></div> -->
            <div class="tab clearfix">
                <p class="fl" v-model="registers.sex" @click="registers.sex=1" :class="{'currt':registers.sex==1}">先生</p>
                <p class="fl" v-model="registers.sex" @click="registers.sex=2" :class="{'currt':registers.sex==2}">女士</p>
            </div>
            <input name="checkbox" type="checkbox" value="checkbox" checked="checked" style="height:auto;width:auto;margin-top:16px" onclick="return  false;" />
            <div class="agree">已阅读并同意
                <em>《蓄康荟服务协议》</em>
            </div>
            <button @click="registerNow" class="confirmbtn">确认注册</button>
        </ul>
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
import { Toast } from 'mint-ui';
export default {
    name: 'registerPage',
    components: {

    },
    data() {
        return {
            registerhead: "url(http://hf-resource.oss-cn-shanghai.aliyuncs.com/xwh/20180627050624/1530091048570.png)",
            registers: {
                mobile: '', //电话号码
                password: '', //密码
                validateCode: '',  //验证码
                recommenderNo: '', //推荐码
                // refPersonCount: '', //机构吗
                nickName: '', //姓名
                sex: '1', //性别
            },
            passwords: '',
            show: true,
            count: '',
            timer: null,

        }
    },
    mounted() {
        localStorage.removeItem('token')
        let rn = this.$route.query.RN
        if (rn) {
            this.registers.recommenderNo = rn
        }

    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        myKeyup: async function (e) {
            var keycode = window.event ? e.keyCode : e.which;
            if (keycode == 13) {
                // this.registerNow();
            }
        },
        registerNow: async function () {
            if (this.registers.mobile && this.registers.password && this.passwords && this.registers.validateCode) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.registers.mobile)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                } else if (!/^[0-9]{4,6}$/.test(this.registers.validateCode)) {
                    Toast({ message: '验证码格式不正确！', duration: 1000 })
                } else if (!/^[0-9a-zA-Z]{6,12}$/.test(this.registers.password)) {
                    Toast({ message: '密码格式不正确！', duration: 1000 })
                } else if (!/^[0-9a-zA-Z]{6,12}$/.test(this.passwords)) {
                    Toast({ message: '确认密码格式不正确！', duration: 1000 })
                } else if (this.registers.password != this.passwords) {
                    Toast({ message: '两次密码输入不同！', duration: 1000 })
                } else {
                    const res = await http.post('xshk/f/home/register', this.registers)
                    // console.log(res);
                    if (res.data.code === 0) {
                        Toast({ message: res.data.message, duration: 1000 })
                        //存token 跳转我的页面
                        localStorage.setItem('token', res.data.data)
                        this.$router.push('/center')
                    } else {
                        Toast({ message: res.data.message, duration: 1000 })
                    }
                }
            } else {
                Toast({ message: '请把必填数据填写完整，再提交！', duration: 1000 })
            }
        },
        //电话号码验证
        phoneBlur: async function () {
            const _this = this
            if (_this.registers.mobile) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.registers.mobile)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        //验证码验证
        codeBlur: async function () {
            const _this = this
            if (_this.registers.validateCode) {
                _this.usernameTips = false;
                if (!/^[0-9]{4,6}$/.test(_this.registers.validateCode)) {
                    Toast({ message: '请输入正确的验证码！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        //密码验证
        passwordBlur: async function () {
            const _this = this
            if (_this.registers.password) {
                _this.usernameTips = false;
                if (!/^[0-9a-zA-Z]{6,12}$/.test(_this.registers.password)) {
                    Toast({ message: '请输入6-12位字母，数字组合的密码！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        //确认密码验证
        passworsdBlur: async function () {
            const _this = this
            if (_this.passwords) {
                _this.usernameTips = false;
                if (!/^[0-9a-zA-Z]{6,12}$/.test(_this.passwords)) {
                    Toast({ message: '请输入6-12位字母，数字组合的密码！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },

        // 倒计时
        getCode(registers) {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        },
        //获取验证码
        getSMSCode: async function () {
            if (this.registers.mobile) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.registers.mobile)) {
                    Toast('请输入正确的手机号码！', { duration: 1000 });
                    return false;
                } else {
                    const res = await http.get('xshk/f/message/getValidate', this.registers)
                    console.log(res);
                    if (res.data.code == 0) {
                        this.getCode()
                        Toast({ message: '验证码发送成功', duration: 1000 })
                    } else {
                        Toast({ message: res.data.message, duration: 2000 })
                    }
                }
            } else {
                Toast({ message: '请输入手机号后，再提交！', duration: 2000 })
            }

        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
    padding: 0;

    .userlist {
        width: 100%;
        height: 400px;
        padding: 0 10% 0 10%;
        font-size: 16px;

        li {
            height: 40px;
            width: 100%;
            border-bottom: 1px solid lightgrey;
            margin-bottom: 5px;
            position: relative;

            .code-btn {
                padding: 0;
                position: absolute;
                top: 3px;
                right: 20px;
                border: none;
                border-radius: 5px;
                font-size: 12px;
                color: rgba(255, 255, 255, 1);

                p {
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    display: inline-block;
                    border-radius: 5px;
                    background: #c2df5a;
                }

                .count {
                    background: #ccc;
                }
            }
        }

        div.tab {
            width: 100%;
            padding: 5px 10px;
            height: 40px;

            p {
                width: 50%;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }

            .currt {
                background-color: #aad114;
                border-radius: 5px;
                color: #fff;
            }
        }
    }

    .userlist span {
        width: 20px;
        height: 20px;
        display: block;
        margin-top: 10px;
        float: left;

        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .userlist input {
        display: block;
        height: 95%;
        width: 65%;
        float: left;
        text-indent: 20px;
        font-size: 16px;
    }

    // .userlist .confirmbig
    // height 20px
    // width 20px
    // background green
    // float left
    // padding 5px
    // border-radius 100%
    // margin 15px 10px 0 20px
    // .userlist .confirmlittle
    // height 10px
    // width 10px
    // background #fff
    // border-radius 100%
    .userlist .agree {
        height: 20px;
        color: #999;
        margin-top: 20px;
    }

    .userlist .confirmbtn {
        display: block;
        height: 50px;
        line-height: 50px;
        width: 100%;
        margin-top: 30px;
        border: 0;
        background: #aad114;
        color: #fff;
        border-radius: 5px;
        font-size: 20px;
    }

    .userlist input::-webkit-input-placeholder {
        color: lightgrey;
    }
}
</style>